<template>
    <el-main v-loading="loading">
        <el-row :gutter="20" class="margin_bottom_30">
            <el-col :span="4">
                <el-input placeholder="输入用户昵称" size="small" v-model="filterData.memberNickName"></el-input>
            </el-col>
            <!-- <el-col :span="4">
                <el-select
                    v-model="filterData.medalType"
                    prop="campaignState"
                    placeholder="请选择权益类型"
                    size="small"
                    style="width:100%"
                    @change="checkMedalType">
                    <el-option
                        v-for="item in medalTypeList"
                        :key="item.labelId"
                        :label="item.labelText"
                        :value="item.labelId"></el-option>
                </el-select>
            </el-col> -->
            <el-col :span="4" :offset="1">
                <p style="display: flex">
                    <el-button type="primary" size="small" @click="search">搜 索</el-button>
                    <el-button size="small" @click="resetQuery">重 置</el-button>
                </p>
            </el-col>
        </el-row>
        <el-table
            :data="dataList"
            border
            :row-key="row => row.memberEquityUid"
            height="640"
            :header-cell-style="{background:'#afafaf',color:'#606266'}"
            ref="multipleTable"
            @selection-change="handleSelectionChange">
            <el-table-column align="center" type="selection" reserve-selection width="40"></el-table-column>
            <el-table-column align="center" width="100" label="用户昵称">
                <template slot-scope="scope">
                    <p>{{scope.row.wechatNickName ? $util.decode(scope.row.wechatNickName) : '待录入'}}</p>
                </template>
            </el-table-column>
            <el-table-column align="center" width="100" label="城市">
                <template slot-scope="scope">
                    <p>{{scope.row.wechatCity || '待录入'}}</p>
                </template>
            </el-table-column>
            <el-table-column align="center" width="120" label="联系方式">
                <template slot-scope="scope">
                    <p>{{scope.row.wechatMobile || '待录入'}}</p>
                </template>
            </el-table-column>
            <el-table-column prop="medalEquityName" align="center" width="120" label="权益名称"></el-table-column>
            <el-table-column width="200" align="center" label="权益信息">
                <template slot-scope="scope">
                    <div class="rightItems" v-for="item of scope.row.itemModels" :key="item.medalRightItemUid">
                        <img v-image-preview v-if="item.medalEquityImage" :src="item.medalEquityImage" class="rightItems_icon" />
                        <p class="rightItems_name">
                            <el-tooltip :content="item.medalEquityName">
                                <span>{{item.medalEquityName | controlLength}}</span>
                            </el-tooltip>
                        </p>
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="receiveTime" align="center" width="200" label="获取时间"></el-table-column>
        </el-table>

        <el-row class="footer">
            <el-col :span="12">
				<el-checkbox
                    v-model="checkAll"
                    :disabled="!dataList.length"
                    @change="handleCheckAllChange">全选
                </el-checkbox>
			</el-col>
			<el-col :span="12">
				<el-pagination
                    @current-change="handleCurrentChange"
                    :current-page="page"
                    :page-size="10"
                    background
                    :disabled="!dataList.length"
                    :total="count"
                    class="text_align_right"
                    layout="total, prev, pager, next, jumper">
                </el-pagination>
			</el-col>
		</el-row>
    </el-main>
</template>
<script>
    import { getRightRecord } from "@/api/table";
    import utils from '@/utils/utils';

    export default {
        name: "MEDAL_RIGHTS_RECORD_LIST",
        filters: {
            controlLength: curStr => utils.controlLength(curStr, 10),
        },
        data() {
            return {
                count: 0,
                checkAll: false, // 全选
                // medalTypeList: [{
				// 	labelId: 1,
				// 	labelText: '成就勋章'
				// }, {
				// 	labelId: 2,
				// 	labelText: '特殊勋章'
				// }],
                dataList: [],
                loading: false,
                page: 1,
                filterData: {},
            }
        },
        components: {},
        mounted() {
            this.getData();
        },
        methods: {
            // 搜索
            search(){
                this.getData();
            },
            //加载第几页
            handleCurrentChange(val) {
                this.page = val;
                this.getData();
            },
            // 全选
            handleCheckAllChange(val) {
                if (this.checkAll) {
                    this.$refs.multipleTable.toggleAllSelection();
                } else {
                    this.$refs.multipleTable.clearSelection();
                }
            },
            resetQuery() {
                this.filterData = {};
                this.page = 1;
                this.getData();
            },
            // 商品分类
            checkMedalType(e) {
                this.filterData.medalType = e;
                this.getData()
            },
            // 监听选择的内容
            handleSelectionChange(val) {
                this.checkAll = this.dataList.length === val.length
            },
            // 获取数据
            getData() {
                this.loading = true;
                getRightRecord({
                    ...this.filterData,
                    page: this.page - 1
                }).then(res => {
                    if (res.data.isSuccessful === "Y") {
                        const {
                            count,
                            getRightRecord
                        } = res.data.data;
                        this.count = count;
                        this.dataList  = getRightRecord;
                    }
                })
                .catch(err => {})
                .finally(() => {
                    if (this.loading) {
                        this.loading = false
                    }
                });
            },
        }
    }
</script>
<style lang="scss" scoped>
    .rightItems {
        display: flex;
        align-content: center;
        margin-bottom: 10px;
        &_name {
            margin-left: 10px;
            text-align: left;
        }
        &_icon {
            height: 40px;
            width: 40px;
            object-fit: cover;
            border-radius: 5px
        }
    }
</style>
